<template>
	<div class="contest-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>{{ $t('rank') }}</th>
					<th>{{ $t('user.name') }}</th>
					<th>{{ $t('user.nick') }}</th>
					<th>{{ $t('accepted') }}</th>
					<th>{{ $t('submit') }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in rank" :key="item.id">
					<td>{{ item.ranking }}</td>
					<td>
						<RouterLink class="link-color" :to="userInfoUrl(item.userId)">
							{{ item.username }}
						</RouterLink>
					</td>
					<td>{{ item.usernick }}</td>
					<td>
						<RouterLink class="link-color" :to="'/status?result=4&username=' + item.username" style="color: green">
							{{ item.accepted }}
						</RouterLink>
					</td>
					<td>
						<RouterLink class="link-color" :to="'/status?username=' + item.username">
							{{ item.submit }}
						</RouterLink>
					</td>
				</tr>
			</tbody>
		</table>
	</div>


	<Pagination :page-info="pageInfo" :get-page-url="getPageUrl" />
</template>


<script type="module">
import Pagination from '@/components/Pagination.vue';
import { RankService, Router } from '@/common/common.object'
import { pageInfo } from '@/common/pagination';
import { RouterLink } from 'vue-router';

export default {
	data() {
		return {
			rank: null,
			pageInfo: null,

			getPageUrl: Router.page.rank,
		};
	},
	components: {
		Pagination,
	},
	created() {
		RankService.getPage(this.$route.query.pageNumber, this.$route.query.pageSize).then(result => {
			this.pageInfo = pageInfo(result);
			this.rank = Object.freeze(result.list);
		});
	},
	methods: {
		userInfoUrl(userId) {
			return Router.page.user.judgeInfo(userId);
		},
	}
}
</script>


<style scope>
table>tbody>tr {}

table>thead>tr>th {
	border-top: none !important;
}
</style>
